import React, { PureComponent } from 'react';
import styles from '../People/People.less';
import { connect } from 'dva';
import ListModal from './ListModal'; 
import { Link } from 'dva/router'; 
import {
  Card,
  Table,
  Divider,
  Tag,
  Popconfirm,
  Form,
  Row,
  Col,
  Button,
  Input,
  Cascader,
  Badge,
  Select
} from 'antd';
const Option =Select.Option;
const FormItem = Form.Item;
import PageHeaderLayout from '../../layouts/PageHeaderLayout'; //引入面包屑
const statusMap = ['default', 'processing', 'success', 'error'];
const status = ['未激活', '已禁用', '已激活', '密码过期'];
@connect(({ employe, loading }) => ({
  employe: employe.currentEmploye,
  employeLoading: loading.effects['employe/getEmployelist'],
}))
@Form.create()
export default class Employelist extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'employe/getEmployelist',
    });
  }
  handleSearch = e => {
    //表单条件查询
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
      };
      this.setState({
        formValues: values,
      });
      console.log(values);
      dispatch({
        type: 'employe/fetch',
        payload: values,
      });
    });
  };
  handleFormReset = () => {
    //表单重置
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({
      formValues: {},
    });
    dispatch({
      type: 'employe/fetch',
      payload: {},
    });
  };
  deleteHandler = id => {
    //删员工记录
    const { dispatch } = this.props;
    dispatch({
      type: 'employe/remove',
      payload: id,
    });
  };
  editHandler = (id, values) => {
    //修改人员记录
    const { dispatch } = this.props;
    dispatch({
      type: 'employe/update',
      payload: { id, values },
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const { employe, employeLoading } = this.props;
    const columns = [{
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    }, {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: text => <a href="javascript:;">{text}</a>,
    },{
      title: '账号',
      dataIndex: 'account',
      key: 'account',
    }, {
      title: '工号',
      dataIndex: 'number',
      key: 'number',
    },{
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
    }, {
      title: '在线系统',
      key: 'tags',
      dataIndex: 'tags',
      render: tags => (
        <span>
          {tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}
        </span>
      ),
    },{
      title: '状态',
      dataIndex: 'status',
      filters: [
        {
          text: status[0],
          value: 0,
        },
        {
          text: status[1],
          value: 1,
        },
        {
          text: status[2],
          value: 2,
        },
        {
          text: status[3],
          value: 3,
        },
      ],
      onFilter: (value, record) => record.status.toString() === value,
      render(val) {
        return <Badge status={statusMap[val]} text={status[val]} />;
      },
    }, {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
            <Link to={'/employe/employedetail/' + record.id}>查看</Link>
            <Divider type="vertical" />
            <ListModal record={record} onOk={this.editHandler.bind(null, record.id)}>
              <a>修改</a>
            </ListModal>
            <Divider type="vertical" />
            <Popconfirm title="确定删除？" onConfirm={this.deleteHandler.bind(null, record.id)}>
              <a href="">删除</a>
            </Popconfirm> 
        </span>
      ),
    }];
    return (
      <PageHeaderLayout
        title="工作人员列表"
        content="工作人员列表用于收集图书馆内部工作人员，工作人员列表页是数据项基本的全面信息场景。"
      >
        <Card bordered={false}>
              <div
                  className={styles.tableListForm}
                  style={{ backgroundColor: '#EDF1F3', width: '100%' }}
                >
                  <Form onSubmit={this.handleSearch} layout="inline">
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={8} sm={24} className={styles.tableListFormLable}>
                        <FormItem label="员工名字">
                          {getFieldDecorator('name')(<Input placeholder="请输入" />)}
                        </FormItem>
                      </Col>
                      <Col md={8} sm={24}>
                        <FormItem label="工号">
                          {getFieldDecorator('number')(<Input placeholder="请输入" />)}
                        </FormItem>
                      </Col>
                      <Col md={8} sm={24}>
                        <FormItem  label="用户状态">
                          {getFieldDecorator('status', {
                          })(
                            <Select>
                              <Option value="0">未激活</Option>
                              <Option value="1">已禁用</Option>
                              <Option value="2">已激活</Option>
                              <Option value="3">密码过期</Option>
                            </Select>
                          )}
                        </FormItem>
                      </Col>
                      <Col md={8} sm={24}>
                        <span className={styles.submitButtons} style={{ float: 'right' }}>
                          <Button
                            type="primary"
                            htmlType="submit"
                            style={{ width: 82, height: 32, backgroundColor: '#1772c3' }}
                            onClick={this.handleSearch}
                          >
                            查询
                          </Button>
                          <Button
                            style={{ marginLeft: 20, width: 82, height: 32 }}
                            onClick={this.handleFormReset}
                          >
                            重置
                          </Button>
                        </span>
                      </Col>
                    </Row>
                  </Form>
                </div>
            <div className={styles.tables}>
                <Table 
                columns={columns}
                dataSource={employe} 
                loading={employeLoading}
                pagination={{
                  showSizeChanger: true,
                  showQuickJumper: true,
                  pageSize: 10, //每页5条数据
                  total: employe.total,
                  showTotal: total => `共 ${total} 条数据`,
                }}
                rowKey="id" //设置唯一id
                 />
            </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}